.toc {
    border-left: 3px solid;
    font-size: 16px;
    margin: 0;
    position: relative;
}

@media (min-width: 480px) {
    .toc {
        border-left-width: 4px;
        font-size: 17px;
    }
}

@media (min-width: 840px) {
    .toc {
        border-left-width: 5px;
        font-size: 18px;
        margin-right: 400px;
    }
}

.toc:before {
    color: #757575;
    content: "Contents";
    font-size: 15px;
    font-weight: 400;
    line-height: 16px;
    padding-left: 16px;
}

@media (min-width: 840px) {
    .toc:before {
        padding-left: 20px;
    }
}

@media (min-width: 480px) {
    .toc:before {
        padding-left: 18px;
    }
}

.toc ::deep ul {
    list-style: none;
    margin: 0;
    padding-left: 16px;
}

.toc> ::deep ul {
    margin-top: 1em;
}

@media (min-width: 840px) {
    .toc ::deep ul {
        padding-left: 20px;
    }
}

@media (min-width: 480px) {
    .toc ::deep ul {
        padding-left: 18px;
    }
}

.toc ::deep ul li {
    margin: 1em 0;
}

.toc ::deep ul li:first-child {
    margin-top: 0;
}

.toc ::deep ul li ul {
    font-size: .83em;
    margin: 1em 0;
}

.toc ::deep a {
    color: inherit;
    text-decoration: none;
}